<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按钮</title>
		<link rel="stylesheet" type="text/css" href="layui-v2.5.7/layui/css/layui.css"/>
	</head>
	<!--
	按钮：
	向任意HTML元素设定class="layui-btn"，建立一个基础按钮。
	通过追加格式为layui-btn-{type}的class来定义其它按钮风格。
	例如：百搭	class="layui-btn layui-btn-normal"
         暖色	class="layui-btn layui-btn-warm"
	内置的按钮class可以进行任意组合，从而形成更多种按钮风格。
	 -->
	<body>
		<button type="button" class="layui-btn">一个标准的按钮</button>
		<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
		<div class="layui-btn">一个标签</div>    
		<hr />
		<!-- 按钮主题 加layui-btn-primary/normal/warm/danger/disabled/空则为默认-->
		<button class="layui-btn layui-btn-primary">原始</button>
		<button class="layui-btn">默认</button>
		<button class="layui-btn layui-btn-normal">百搭</button>
		<button class="layui-btn layui-btn-warm">暖色</button>
		<button class="layui-btn layui-btn-danger">警告</button>
		<button class="layui-btn layui-btn-disabled">禁用</button>
		<hr >
		<!-- 按钮尺寸 加layui-btn-lg/sm/xs/空则为默认 -->
		<button class="layui-btn layui-btn-lg layui-btn-normal">大型百搭</button>
		<button class="layui-btn layui-btn-warm">正常暖色</button>
		<button class="layui-btn layui-btn-sm layui-btn-danger">小型警告</button>
		<button class="layui-btn layui-btn-xs layui-btn-disabled">迷你禁用</button>
		<hr >
		<!-- 圆角按钮 加layui-btn-radius -->
		<button class="layui-btn layui-btn-lg layui-btn-normal layui-btn-radius">大型百搭圆角</button>
		<button class="layui-btn layui-btn-warm layui-btn-radius">正常暖色圆角</button>
		<button class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius">小型警告圆角</button>
		<button class="layui-btn layui-btn-xs layui-btn-disabled layui-btn-radius">迷你禁用圆角</button>
		<hr >
		<!-- 流体按钮（最大化适应）加layui-btn-fluid -->
		<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>
		<hr >
		<!-- 
		图标按钮：通过对一个内联元素（一般推荐用 i标签）设定 class="layui-icon"，来定义一个图标 
		         <i class="layui-icon layui-icon-图标代号"></i>   
		-->
		<button type="button" class="layui-btn">
		  <i class="layui-icon layui-icon-down layui-font-12"></i> 按钮
		</button>
		 
		<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
		  <i class="layui-icon layui-icon-left ">左</i>按钮
		</button>
		<button type="button" class="layui-btn layui-btn-warm layui-btn-lg layui-btn-radius" >
			<i class="layui-icon layui-icon-windows"></i>启动
		</button>
		<hr >
		<!-- 按钮组 将按钮放入一个class="layui-btn-group"元素中，即可形成按钮组，按钮本身仍然可以随意搭配-->
		<div class="layui-btn-group">
		  <button type="button" class="layui-btn">增加</button>
		  <button type="button" class="layui-btn">编辑</button>
		  <button type="button" class="layui-btn">删除</button>
		</div>
		      
		<div class="layui-btn-group">
		  <button type="button" class="layui-btn layui-btn-sm">
		    <i class="layui-icon">&#xe654;</i>
		  </button>
		  <button type="button" class="layui-btn layui-btn-sm">
		    <i class="layui-icon">&#xe642;</i>
		  </button>
		  <button type="button" class="layui-btn layui-btn-sm">
		    <i class="layui-icon">&#xe640;</i>
		  </button>
		  <button type="button" class="layui-btn layui-btn-sm">
		    <i class="layui-icon">&#xe602;</i>
		  </button>
		</div>
		 
		<div class="layui-btn-group">
		  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
		    <i class="layui-icon">&#xe654;</i>
		  </button>
		  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
		    <i class="layui-icon">&#xe642;</i>
		  </button>
		  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
		    <i class="layui-icon">&#xe640;</i>
		  </button>
		</div>
	</body>
</html>
